<mat-nav-list class="menu-list">
  <div class="filter-div" (mousedown)="mouseDown()" (mouseup)="mouseUp()">
    <!-- その他 -->
    <div class="other-filter-div">
      <div
        class="button"
        (mousedown)="clickEnka(true)"
        (mouseenter)="clickEnka()"
        [ngClass]="{
          'button-on': this.menuSetting.filterEnka,
          'button-off': !this.menuSetting.filterEnka
        }"
      >
        <figure
          class="shinshinmoe other-content"
          [ngClass]="{
            'button-other-on': this.menuSetting.filterEnka,
            'button-other-off': !this.menuSetting.filterEnka
          }"
        ></figure>
      </div>
      <div
        class="button"
        (mousedown)="clickData(true)"
        (mouseenter)="clickData()"
        [ngClass]="{
          'button-on': this.menuSetting.filterData,
          'button-off': !this.menuSetting.filterData
        }"
      >
        <span
          class="other-content"
          [ngClass]="{
            'button-other-on': this.menuSetting.filterData,
            'button-other-off': !this.menuSetting.filterData
          }"
        >
          <mat-icon>cloud_done</mat-icon>
        </span>
      </div>
    </div>
    <!-- 武器タイプ -->
    <div class="weapon-filter-div">
      <div
        *ngFor="let weaponType of weaponTypeList"
        class="button element-button"
        (mousedown)="clickWeapon(weaponType, true)"
        (mouseenter)="clickWeapon(weaponType)"
        [ngClass]="{
          'button-on': menuSetting.filterWeaponType[weaponType],
          'button-off': !menuSetting.filterWeaponType[weaponType]
        }"
      >
        <img
          class="weapon-icon"
          draggable="false"
          [src]="weaponTypeSvgPath.get(weaponType)"
          loading="lazy"
          [ngClass]="{
            'button-weapon-on': menuSetting.filterWeaponType[weaponType],
            'button-weapon-off': !menuSetting.filterWeaponType[weaponType]
          }"
          appImgErrorHandle
        />
      </div>
    </div>
    <!-- 元素タイプ -->
    <div class="element-filter-div">
      <div
        *ngFor="let element of elementList"
        class="button element-button"
        (mousedown)="clickElement(element, true)"
        (mouseenter)="clickElement(element)"
        [ngClass]="{
          'button-on': menuSetting.filterElementType[element],
          'button-off': !menuSetting.filterElementType[element]
        }"
      >
        <img
          class="element-icon"
          draggable="false"
          [ngClass]="{
            'button-element-on': menuSetting.filterElementType[element],
            'button-element-off': !menuSetting.filterElementType[element]
          }"
          [src]="elementSvgPath.get(element)"
          loading="lazy"
          appImgErrorHandle
        />
      </div>
    </div>
    <!-- キャラ名 -->
    <mat-form-field appearance="outline" class="select-filter">
      <input
        matInput
        type="text"
        placeholder="Filter"
        [(ngModel)]="this.menuSetting.filterContent"
        (ngModelChange)="filterMenuList()"
      />
    </mat-form-field>
  </div>
  <div class="menu-items-div">
    <ng-container *ngFor="let menu of filteringMenuList">
      <a mat-list-item (click)="onClick(menu)">
        <app-chara-option
          [charaInfo]="menu"
          [currentLanguage]="currentLanguage"
          class="option"
        ></app-chara-option>
      </a>
    </ng-container>
  </div>
</mat-nav-list>
